<template>
    <div class="content">
        <!-- openlayers地图 -->
        <div class="map">
            <dataMap ref="openlayersMap"></dataMap>

        </div>
        <dataPopup></dataPopup>

        <div style="position: absolute; right: var(--system-map-padding); top: var(--system-map-padding)">
            <DataTable :prj-name="'testpro'" :spatial-query-model="true" :conditional-query-model="true"
                :edit-model="false"></DataTable>
        </div>
    </div>
</template>

<script setup>
import dataMap from './data-map/index.vue';
import dataPopup from './data-popup/index.vue'
import DataTable from './data-table/index.vue';

import { useMapStoreHook } from '@/store/map';

// 初始化map
const mapStore = useMapStoreHook();
const { olMap, extent } = storeToRefs(mapStore);

let form = reactive({
    text: ''
});

let rules = reactive({
    text: [
        {
            required: true,
            message: '请输入文字',
            trigger: 'change'
        }
    ]
});

let pointLayer = ref(null);

const formRef = ref();
//提交表单，查询
const submitForm = (formEl) => {
    if (!formEl) return;
    formEl.validate((valid) => {
        if (valid) {
            console.log(form);
            ElMessage.success('提交成功');
        } else {
            ElMessage.warning('请按规则填写');
            return false;
        }
    });
};
// 重置表单
const resetForm = (formEl) => {
    if (!formEl) return;
    formEl.resetFields();
    ElMessage.success('重置成功');
};

//加点
const addPoint = () => {
    if (!pointLayer.value) {
        pointLayer.value = olMap.value.layer.createVectorLayer('点图层', 35);
    }
    pointLayer.value.getSource().clear();
    olMap.value.vector.addPoint({
        coordinates: [117.93266264415541, 36.07115382604098],
        layer: pointLayer.value,
        style: {
            radius: 10,
            fillColor: '#ff473d',
            strokeWidth: 1,
            strokeColor: 'rgba(255, 255, 255, 0.5)'
        },
        info: {
            name: 'pointInfo',
            info: { name: '测试' }
        }
    });
};
//清除点
const clearPoint = () => {
    if (pointLayer.value) {
        pointLayer.value.getSource().clear();
    }
};

const submitForm1 = () => { };

onMounted(() => { });
</script>

<style lang="less" scoped>
.content {
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
    position: relative;

    .map {
        width: 100vw;
        height: 100%;
    }
}
</style>
